<div class="warp">
  <!-- 排班系统 -->
  <div class="top">
    <div class="onelie">
      <!-- 时间 -->
      <div style="height: 50px; background: #306565;"></div>
      <!-- 設計 -->
      <div class="gx">
        <!-- <img style="vertical-align:middle;height:100%"> -->
        <span>設計</span><br>
        <span>{{one1}}</span>
      </div>
      <!-- 編程 -->
      <!-- <div class="gx">
          <img style="vertical-align:middle;height:100%">
          <span>編程</span>
        </div> -->
      <!-- CNC加工 -->
      <div class="gx">
        <!-- <img style="vertical-align:middle;height:100%"> -->
        <span>CNC加工</span><br>
        <span>{{one2}}</span>
      </div>
      <!-- 二次加工 -->
      <div class="gx">
        <!-- <img style="vertical-align:middle;height:100%"> -->
        <span>二次加工</span><br>
        <span>{{one3}}</span>
      </div>
      <!-- 組裝 -->
      <div class="gx">
        <!-- <img style="vertical-align:middle;height:100%"> -->
        <span>組裝</span><br>
        <span>{{one4}}</span>
      </div>
    </div>
    <div class="from">
      <!-- 第一列  后边渲染就好 -->

      <div class="gdt">

        <div class="lie" *ngFor="let item of listdata let key = index">
          <!-- 时间 -->
          <div class="border"
            style="height: 50px; background: #306565; text-align:center;line-height: 50px;font-size: 16px;color: #fff;">
            {{riqi[key][1]}}/{{riqi[key][2]}}
          </div>
          <!-- 設計 -->
          <div class="nr border" (click)=list(item.design.tasks,key,0) *ngIf="item.design.tasks.length==0? true:false;"
            [ngClass]=" item.design.hit==false?  '':'nr4'">
            <div style="flex: 1; margin-bottom: -25px;">
              <img style="vertical-align:middle;height:100%">

            </div>
            <div style="flex: 1;">
              <img style="vertical-align:middle;height:100%">

            </div>
          </div>
          <div class="border"
            [ngClass]="item.design.hit==false? (item.design.total_hour>=item.design.set_workhour? 'nr2':'nr3'):'nr4'"
            (click)=list(item.design.tasks,key,0) *ngIf="item.design.tasks.length==0? false:true;">
            <div style="flex: 1; margin-bottom: -25px;">
              <img style="vertical-align:middle;height:100%">
              <span style="color: #F7FF00; font-size: 22px;">{{item.design.tasks.length}}</span>
            </div>
            <div style="flex: 1;">
              <img style="vertical-align:middle;height:100%">
              <span style="color: #fff;font-size: 16px;"> {{item.design.total_hour}} /
                {{item.design.set_workhour}}</span>
            </div>
          </div>


          <!-- 編程 -->

          <!-- <div class="nr border" (click)=list(item.code.tasks,key,1) *ngIf="item.code.tasks.length==0? true:false;"
            [ngClass]=" item.code.hit==false?  '':'nr4'">
            <div style="flex: 1; margin-bottom: -25px;">
              <img style="vertical-align:middle;height:100%">

            </div>
            <div style="flex: 1;">
              <img style="vertical-align:middle;height:100%">

            </div>
          </div>
          <div class="border"
            [ngClass]="item.code.hit==false? (item.code.total_hour>=item.code.set_workhour? 'nr2':'nr3'):'nr4'"
            (click)=list(item.code.tasks,key,1) *ngIf="item.code.tasks.length==0? false:true;">
            <div style="flex: 1; margin-bottom: -25px;">
              <img style="vertical-align:middle;height:100%">
              <span style="color: #F7FF00; font-size: 22px;">{{item.code.tasks.length}}</span>
            </div>
            <div style="flex: 1;">
              <img style="vertical-align:middle;height:100%">
              <span style="color: #fff;font-size: 16px;"> {{item.code.total_hour}} /
                {{item.code.set_workhour}}</span>
            </div>
          </div> -->
          <!-- CNC加工 -->
          <div class="nr border" (click)=list(item.jiagong.tasks,key,2)
            *ngIf="item.jiagong.tasks.length==0? true:false;" [ngClass]=" item.jiagong.hit==false?  '':'nr4'">
            <div style="flex: 1; margin-bottom: -25px;">
              <img style="vertical-align:middle;height:100%">

            </div>
            <div style="flex: 1;">
              <img style="vertical-align:middle;height:100%">

            </div>
          </div>
          <div class="border"
            [ngClass]="item.jiagong.hit==false? (item.jiagong.total_hour>=item.jiagong.set_workhour? 'nr2':'nr3'):'nr4'"
            (click)=list(item.jiagong.tasks,key,2) *ngIf="item.jiagong.tasks.length==0? false:true;">
            <div style="flex: 1; margin-bottom: -25px;">
              <img style="vertical-align:middle;height:100%">
              <span style="color: #F7FF00; font-size: 22px;">{{item.jiagong.tasks.length}}</span>
            </div>
            <div style="flex: 1;">
              <img style="vertical-align:middle;height:100%">
              <span style="color: #fff;font-size: 16px;"> {{item.jiagong.total_hour}} /
                {{item.jiagong.set_workhour}}</span>
            </div>
          </div>
          <!-- 二次加工 -->
          <div class="nr border" (click)=list(item.ercijiagong.tasks,key,3)
            *ngIf="item.ercijiagong.tasks.length==0? true:false;" [ngClass]=" item.ercijiagong.hit==false?  '':'nr4'">
            <div style="flex: 1; margin-bottom: -25px;">
              <img style="vertical-align:middle;height:100%">

            </div>
            <div style="flex: 1;">
              <img style="vertical-align:middle;height:100%">

            </div>
          </div>
          <div class="border"
            [ngClass]="item.ercijiagong.hit==false? (item.ercijiagong.total_hour>=item.ercijiagong.set_workhour? 'nr2':'nr3'):'nr4'"
            (click)=list(item.ercijiagong.tasks,key,3) *ngIf="item.ercijiagong.tasks.length==0? false:true;">
            <div style="flex: 1; margin-bottom: -25px;">
              <img style="vertical-align:middle;height:100%">
              <span style="color: #F7FF00; font-size: 22px;">{{item.ercijiagong.tasks.length}}</span>
            </div>
            <div style="flex: 1;">
              <img style="vertical-align:middle;height:100%">
              <span style="color: #fff;font-size: 16px;"> {{item.ercijiagong.total_hour}} /
                {{item.ercijiagong.set_workhour}}</span>
            </div>
          </div>
          <!-- 組裝 -->
          <div class="nr border" (click)=list(item.zuzhuang.tasks,key,4)
            *ngIf="item.zuzhuang.tasks.length==0? true:false;" [ngClass]=" item.zuzhuang.hit==false?  '':'nr4'">
            <div style="flex: 1; margin-bottom: -25px;">
              <img style="vertical-align:middle;height:100%">

            </div>
            <div style="flex: 1;">
              <img style="vertical-align:middle;height:100%">

            </div>
          </div>
          <div class="border"
            [ngClass]="item.zuzhuang.hit==false? (item.zuzhuang.total_hour>=item.zuzhuang.set_workhour? 'nr2':'nr3'):'nr4'"
            (click)=list(item.zuzhuang.tasks,key,4) *ngIf="item.zuzhuang.tasks.length==0? false:true;">
            <div style="flex: 1; margin-bottom: -25px;">
              <img style="vertical-align:middle;height:100%">
              <span style="color: #F7FF00; font-size: 22px;">{{item.zuzhuang.tasks.length}}</span>
            </div>
            <div style="flex: 1;">
              <img style="vertical-align:middle;height:100%">
              <span style="color: #fff;font-size: 16px;"> {{item.zuzhuang.total_hour}} /
                {{item.zuzhuang.set_workhour}}</span>
            </div>
          </div>
          <div style="clear:both;"></div>
        </div>

      </div>

    </div>
  </div>
  <!-- 详细信息 -->
  <div class="bottom">
    <nz-table #headerTable style="border-collapse:collapse;border-radius:4px 4px 0px 0px;" class="designTable"
      [nzShowPagination]='false' [nzScroll]="{ y: '440px'}">
      <thead class="tableHeard" style="text-align: center !important;color: #ffffff;height: 50px;">
        <tr style="text-align: center !important;">
          <th nzWidth="50px"></th>
          <th nzWidth="50px"></th>
          <th nzWidth="200px">治具名稱</th>
          <th nzWidth="100px">數量</th>
          <th nzWidth="100px">操作時長</th>
          <th nzWidth="100px">工時對比</th>
          <th nzWidth="200px">工作日期</th>
          <th nzWidth="200px">治具交期</th>
        </tr>
      </thead>
      <!-- 工联单Table -->
      <tbody class="tablecontent">
        <ng-container>
          <tr class="leiming" style="text-align: center !important;" *ngFor="let item of datelist let key =index">
            <!-- 编辑按钮 -->
            <td>
              <div class="editable-row-operations">
                <ng-container *ngIf="isshow[key].edit; else saveTpl">
                  <a (click)="startEdit(key)"><img src="../../../assets/image/icon_edit_white.svg"></a>
                </ng-container>
                <ng-template #saveTpl>
                  <a (click)="saveEdit(key)"><img src="../../../assets/image/icon_ok.svg"></a>
                </ng-template>
              </div>
            </td>
            <!-- 删除按钮 -->
            <td>
              <button nz-button [nzType]="'primary'" class="del" *ngIf="isshow[key].isdel"
                (click)="showModal(item)"></button>
              <a (click)="cancelEdit(key)" *ngIf="!isshow[key].edit"><img
                  src="../../../assets/image/icon_cancel.svg"></a>
            </td>
            <td
              style="cursor:pointer;max-width: 230px; overflow: hidden; white-space: nowrap;text-overflow: ellipsis;text-align: center;"
              title={{item.name}}>
              {{item.name}}
            </td>
            <td>{{item.quatity}}</td>
            <td class="input_first">
              <ng-container *ngIf="isshow[key].edit; else fullnam">
                {{item.workhour}}H
              </ng-container>
              <ng-template #fullnam>
                <input style="width: 200px;color:#ffffff;" type="number" nz-input
                  [(ngModel)]="isshow[key]['data'].workhour" />
              </ng-template>
            </td>
            <td>{{item.total_workhour}}/{{item.estimate_workhour}}</td>
            <td class="input_first">
              <ng-container *ngIf="isshow[key].edit; else fullname">
                {{item.date}}
              </ng-container>
              <ng-template #fullname>
                <input style="width: 200px;color:#ffffff;" type="text" nz-input
                  [(ngModel)]="isshow[key]['data'].date" />
              </ng-template>
            </td>
            <td>{{item.delivery_date}}</td>

          </tr>
        </ng-container>

      </tbody>
    </nz-table>
    <!-- 删除弹出框-->
    <nz-modal [(nzVisible)]="isVisible" nzTitle="刪除" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()"
      [nzMaskStyle]="{backgroundColor:'rbga(48,73,77,.05)'}"
      [nzBodyStyle]="{height:'200px',background:'rgba(31,46,49,1)',color:'#ffffff',fontSize:'20px',fontWight:'300',textAlign:'center',lineHeight:'200px'}">
      <p>確認要删除這整個工單嗎？ </p>
    </nz-modal>
  </div>